import React, { memo, useEffect, useState } from 'react'
import { Input, Tabs, Skeleton } from 'antd'
import { SearchOutlined } from '@ant-design/icons'


// 引入接口
import { getHotSearch } from '../../../api/searchApi'

// 引入样式
import { SearchBox } from './style'
export default memo(function Search() {
  const { TabPane } = Tabs;
  // state
  const [hotList, setHotList] = useState([]) // 热门搜索
  const [query, setQuery] = useState({}) // 查询参数
  const [mainList, setMainList] = useState([]) // 展示的数据内容

  // 请求
  useEffect(() => {
    getHotSearch().then(res => {
      setHotList(res.result.hots.slice(0, 3))
    })
  }, [])

  // others
  const TabsChange = (active) => {
    console.log(active);
  }
  return (
    <SearchBox >
      <div className="top">
        <div className="wrap">
          <div className="search">
            <Input placeholder="搜索音乐、MV、歌单、用户" suffix={<SearchOutlined />} />

            <div className="hotSearch">
              热门搜索:
              {
                hotList.map((item, index) => {
                  return (
                    <span key={index}>{item.first}</span>
                  )
                })
              }
            </div>
          </div>
        </div>
      </div>

      <div className="wrap">
        <div className="search_type">
          <Tabs defaultActiveKey="1" size="large" onChange={TabsChange}>
            <TabPane tab="歌曲" key="1">
              {
                mainList.length == 0 ? (<div>
                  <Skeleton active />
                  <Skeleton active />
                </div>)
                  :
                  (<div>数据</div>)
              }
            </TabPane>
            <TabPane tab="歌手" key="100">
              Content of Tab Pane 2
            </TabPane>
            <TabPane tab="歌单" key="1000">
              Content of Tab Pane 3
            </TabPane>
            <TabPane tab="用户" key="1002">
              Content of Tab Pane 4
            </TabPane>
            <TabPane tab="MV" key="1004">
              Content of Tab Pane 5
            </TabPane>
          </Tabs>
        </div>
      </div>
    </SearchBox>
  )
})
